<template>
	<view :style="'color: ' + textColor">
		<view class="status-navbar-fixed" :style="{
				background: 'linear-gradient(to right,' + leftColor + ',' + rightColor + ')'
			}"></view>
		<view class="nav-header" :style="{
				background: 'linear-gradient(to right,' + leftColor + ',' + rightColor + ')'
			}">
			<!-- 返回箭头 -->
			<view class="header-l" @click="handleGoBack">
				<text class="iconfont" :style="{color:backColor}">&#xe604;</text>
				<view class="left-tt">
					<slot name="left"></slot>
				</view>
			</view>
			<!-- 中间内容 -->
			<view class="nav-title">
				<slot name="center"></slot>
			</view>
			<!-- 右边内容 -->
			<view class="header-r">
				<slot name="right"></slot>
			</view>
		</view>
		<view class="pl"></view>
	</view>
</template>

<script>
	export default {
		props: {
			leftColor: {
				type: String,
				default: '#fff'
			},
			rightColor: {
				type: String,
				default: '#fff'
			},
			textColor: {
				type: String,
				default: '#263238'
			},
			backColor: {
				type: String,
				default: '#ffffff'
			}
		},
		data() {
			return {};
		},
		created() {},
		methods: {
			handleGoBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.status-navbar-fixed {
		position: fixed;
		top: 0;
		z-index: 99999;
		height: var(--status-bar-height);
		width: 100%;
	}

	.nav-title {
		font-size: 34upx;
		font-weight: 600;
	}

	.nav-header {
		width: 100%;
		position: fixed;
		top: var(--status-bar-height);
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
		line-height: 88upx;
		box-sizing: border-box;
	}
	.pl {
		height: 88upx;
	}

	.header-r,
	.header-l {
		display: flex;
		align-items: center;
		text-align: center;
		font-size: 32upx;
		.left-tt {
			font-weight: bold;
		}
	}

	.header-l {
		font-size: 32upx;
		.iconfont {
			font-size: 32upx;
			margin-right: 10upx;
		}
	}
	.header-r {
		font-size: 28upx;
	}
</style>
